<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" width="150" height="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // 这个例子有问题
    function draw() {
        // Loop through all images
        for (i=0; i < document.images.length; i++) {

            // Don't add a canvas for the frame image
            if (document.images[i].getAttribute('id')!='frame') {

                // Create canvas element
                canvas = document.createElement('CANVAS');
                canvas.setAttribute('width',132);
                canvas.setAttribute('height',150);

                // Insert before the image，insertBefore()方法是用父级元素调用的，这里是将canvas放在images[i]元素之前
                document.images[i].parentNode.insertBefore(canvas, document.images[i]);

                ctx = canvas.getContext('2d');

                // Draw image to canvas
                ctx.drawImage(document.images[i],15,20);

                // Add frame
                ctx.drawImage(document.getElementById('frame'),0,0);
            }
        }
    }
</script>
</body>
</html>